<div id="app" v-cloak>
    <div class="flex-row" v-if="select!=1">
        <el-button type="primary" @click="handleAdd" color="#626aef">添加文件</el-button>
        <el-button type="danger" @click="handleDeleteAll">批量删除</el-button>
        <el-button type="plain" @click="handleRefresh">
            <el-icon><Refresh /></el-icon>
        </el-button>
    </div>
    <el-table :data="dataObj.rows" style="width: 100%"
              :show-overflow-tooltip="true"
              :height="height?height:700"
              @selection-change="$event=>handleSelectionChange($event,pk?pk:`id`)"
    >
        <el-table-column type="selection" :selectable="selectable" width="55"></el-table-column>
        <el-table-column prop="id" label="ID" width="180">
        </el-table-column>
        <el-table-column prop="" label="分类" width="180">
            <template #default="scope" >
                <div v-if="scope.row.category==`unclassed`">未分类</div>
                <div v-else>{{scope.row.category}}</div>
            </template>
        </el-table-column>
        <el-table-column prop="" label="预览" width="180">
            <template #default="scope" >
                <el-image show-progress  v-if="scope.row.url" :preview-src-list="[scope.row.url]" :preview-teleported="true" :src="scope.row.url" style="width: 50px; height: 50px;"></el-image>
            </template>
        </el-table-column>
        <el-table-column prop="mimetype" label="mime类型"></el-table-column>
        <el-table-column prop="url" label="图片地址" show-overflow-tooltip></el-table-column>
        <el-table-column prop="filesize" label="图片大小">
            <template #default="scope" >
                <div>{{scope.row.filesize/1024}}kb</div>
            </template>
        </el-table-column>
        <el-table-column prop="imagewidth" label="宽"></el-table-column>
        <el-table-column prop="imageheight" label="高"></el-table-column>
        <el-table-column prop="" label="创建时间" width="180">
            <template #default="scope" >
                <div>{{getDate(scope.row.createtime)}}</div>
            </template>
        </el-table-column>
        <el-table-column label="操作" width="180" fixed="right">
            <template #default="scope">
                <el-button v-if="select!=1" type="danger" size="small" @click="handleDelete(scope.row)">删除</el-button>
                <el-button v-if="select==1&&selectIds.includes(scope.row.id)==false" type="primary" size="small" @click="selectAttachment(scope.row)" color="#626aef">选择</el-button>
                <el-button v-if="select==1&&selectIds.includes(scope.row.id)!=false" type="danger" size="small" @click="selectNoAttachment(scope.row)" >已选择</el-button>
            </template>
        </el-table-column>
    </el-table>
    <div class="flex-row flex-content-end" style="margin-top: 10px">
        <el-button v-if="multiple==1" type="primary" @click="confirmAttachment" color="#626aef">确认</el-button>
    </div>
    <div class="flex-row flex-content-end">
        <el-pagination
                :hide-on-single-page="1"
                :current-page="dataObj.page"
                :page-sizes="[10, 20, 30, 40]"
                :page-size="dataObj.limit"
                layout="total, sizes, prev, pager, next, jumper"
                :total="dataObj.total"
                prev-text="上一页"
                next-text="下一页"
                :background="true"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
        ></el-pagination>
    </div>
</div>
<style>
    .demo-image__error .image-slot {
        font-size: 30px;
    }
    .demo-image__error .image-slot .el-icon {
        font-size: 30px;
    }
    .demo-image__error .el-image {
        width: 100%;
        height: 200px;
    }
</style>